import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';
import ReactMarkdown from 'react-markdown';
import { getParams } from '../utils/reactComponentInfoUtils.js';
const Params = ({ component }) => {
  const params = getParams(component.jsDoc);
  
  const columns = [
    {
      title: '参数名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      key: 'required',
      render: required => required ? '是' : '否'
    },
    {
      title: '默认值',
      dataIndex: 'default',
      key: 'default',
      render: defaultValue => defaultValue || ''
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      render: description => description ? <ReactMarkdown>{description.replace(/^-\s*/, '')}</ReactMarkdown> : ''
    },
  ];

  return (
    <div className="params-container">
      <h3>组件参数</h3>
      <Table 
        columns={columns} 
        dataSource={params} 
        pagination={false}
        size="small"
      />
    </div>
  );
};

Params.propTypes = {
  component: PropTypes.object.isRequired
};

export default Params;